<template>
	<view class="userinfo">
		<view class="top">
			<image src="../../static/index/head.png" mode=""></image>
		</view>
		<view class="info-input">
			<view class="title">
				用户名：
			</view>
			<input type="text" v-model="name" />
		</view>
		<view class="btn" @click="ChangeUserInfo">
			保存并使用
		</view>
	</view>
</template>

<script>
	import {
		UserInfo
	} from '../../api/api.js'
	import {
		ChangeUserInfo
	} from '../../api/user.js'
	export default {
		data() {
			return {
				userinfo: [],
				name: ''
			}
		},
		onLoad() {
			this.UserInfo()
		},
		methods: {
			getimg(url) {
				return this.websiteUrl + url
			},
			UserInfo() {
				UserInfo().then(res => {
					console.log(res)
					this.userinfo = res.info
					this.name = this.userinfo.username
				})
			},
			ChangeUserInfo() {
				ChangeUserInfo({
					name: this.name
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.userinfo {
		.top {
			text-align: center;
			padding-top: 20px;

			image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}
		}

		.info-input {
			padding: 5%;
			font-size: 14px;

			input {
				height: 40px;
				background-color: #fff;
				padding-left: 40rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>
